import request from '../../util/request'
import Vuex from 'vuex'

export default {
  namespaced: true,
  state: {
    // 保存当前激活的频道 id
    activeId: 0, // 默认是推荐这个频道激活
    // 用存储频道列表
    list: [],
  },
  mutations: {
    changeActiveId(state, newActiveId) {
      // 当 当前激活的频道id 改变的时候，我们要去更新当前的文章list
      state.activeId = newActiveId
      // 通过打印发现这个 this，长得像 store，但是到底是当前模块的上下文 store 还是 根模块的 store
      // 我们先默认当做当前模块的 store
      // 咱们项目中有很多个 store 吗？没有，真正的 store 只有一个
      console.log(this, 'mutation this', this === window.store)
      // this.dispatch('newList/getList', newActiveId, { root: true })
      // 所以，经过验证，这个 this 就是 你在 src/store/index.js 中 默认导出的那个 根 store 实例
      // this.dispatch('newList/getList', newActiveId)
      this.dispatch('newList/getList')
    },
    changeList(state, newList) {
      state.list = newList
    },
  },
  actions: {
    // ctx 是当前模块的上下文，这个 ctx 就是指的 category 这个子模块的上下文环境
    // 在页面上调用某个子模块的 mutation 时，this.$store.commit('子模块名/mutation名字')
    // ctx.commit('mutation 名字') ==> 默认就是从当前子模块的 mutations 中找 对应的 mutation，所以不用带子模块名
    // ctx.dispatch('action 名字') ==> 默认就是从当前子模块的 actions 中找 对应的 action，所以不用带子模块名
    // 那么，最后还有一个问题：如何在子模块的 action 中，调用到根模块或者其他子模块的 mutation 或 action 呢？
    // Vuex 的 commit 和 dispatch 函数，还有第三个参数：配置选项，其中有一个 root 选项，只要把它改成 true，就意味着从根模块开始找 对应的 mutation 和 action，调用代码形如：
    // 调到根模块：ctx.commit('xxxMutationName', payload, { root: true })
    // 调到其他子模块：ctx.commit('xxxModuleName/xxxMutationName', payload, { root: true })
    // 调到根模块：ctx.dispatch('xxxActionName', payload, { root: true })
    // 调到其他子模块：ctx.dispatch('xxxModuleName/xxxActionName', payload, { root: true })
    getList(ctx, payload) {
      console.log(this, 'action this', this === window.store)
      // 这个 ctx 好像也是 store，如何判断它到底是不是一个 store 实例呢？ 用 instanceof
      // 如果 ctx 是 store，那么说明 Vuex 会给每一个模块创建一个自己的 store 实例（错误的），并不会创建 store 实例，只是一个普通的对象而已，只不过，这个对象里面提供了 commit 和 dispatch 函数
      // 如果 ctx 不是 store，那么说明 整个项目中 只会存在一个 store 实例（正确的）
      console.log(ctx instanceof Vuex.Store, 'ctx instanceof Vuex.Store')
      console.log(ctx.__proto__.constructor, 'ctx.__proto__.constructor')

      request({
        // method: 'GET', // 默认值也是 GET
        url: '/v1_0/channels',
        // params, // 查询参数 ==> xxxUrl?name=zs&age=18
        // data // 请求体参数 ==> get 请求方式没有请求体
      }).then(res => {
        console.log(
          '%c [ res ]-25',
          'font-size:13px; background:pink; color:#bf2c9f;',
          res.data.data.channels
        )
        // 这个数据是不是得存起来，所以在 Vuex 的 state 中要定义一状态去保存这个列表
        // 这里，由于就是想要调用当前子模块的 mutation，所以不需要指定模块名，因为 ctx 就是当前模块的上下文
        ctx.commit('changeList', res.data.data.channels)
      })
    },
  },
}
